<template>
  <div class="factory-edit">
    <el-form :model="form" label-width="120px">
      <el-form-item label="PC端图片：">
        <el-upload ref="upload" action="fakeaction" class="avatar-uploader" :show-file-list="false" :http-request=" function(res) { return upload(res, 'image'); } ">
          <img v-if="form.image" :src="form.image" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="移动端图片：">
        <el-upload ref="upload" action="fakeaction" class="avatar-uploader" :show-file-list="false" :http-request=" function(res) { return upload(res, 'wx_image'); } ">
          <img v-if="form.wx_image" :src="form.wx_image" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="专题名称：">
        <el-input v-model="form.name" placeholder="请输入专题名称"></el-input>
      </el-form-item>
      <el-form-item label="关联工厂ID：">
        <el-input v-model="form.factory_id" placeholder="请输入专题名称"></el-input>
      </el-form-item>
      <el-form-item label="备注：">
        <el-input type="textarea" rows="5" v-model="form.remarks" placeholder="请输入备注"></el-input>
      </el-form-item>
      <el-form-item label="排序：">
        <el-input v-model="form.sort" placeholder="" style="width: 100px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">保存</el-button>
      </el-form-item>
    </el-form>
    <div style="height: 20px;"></div>
  </div>
</template>

<script>
export default {
  props: {
    layerid: {
      type: String,
      default: ''
    },
    id: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      form: {
        senior_id: 1,
        image: '',
        wx_image: '',
        name: '',
        remarks: '',
        factory_id: '',
        sort: ''
      }
    };
  },
  components: {},
  computed: {},
  mounted(){
    if(this.id){
      this.init()
    }
  },
  methods: {
    async init(){
      const { datas } = await this.$http(this.$ApiList.seniorImageInfo,{id: this.id})
      for(let i in this.form){
        this.form[i] = datas[i]
      }
    },
    upload(params,type){
      const form = new FormData();
			form.append('file[]', params.file);
      this.$http(this.$ApiList.publicUpload, form).then(res => {
        this.form[type] = res.datas[0]
      });
    },
    async submit(){
      if(this.id){
        this.form.id = this.id
        await this.$http(this.$ApiList.seniorUpdateImage,this.form)
      }else{
        await this.$http(this.$ApiList.seniorAddImage,this.form)
      }
      this.$layer.msg(this.id?'编辑成功':'添加成功')
      this.$layer.close(this.layerid)
      this.$parent.getseniorImageList()
    }
  }
}
</script>

<style lang='scss'>
  .factory-edit{
    flex: 1;
    min-width: 0;
    padding: 20px 20px 20px 0;
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
    }
    .avatar {
      width: 100px;
      height: 100px;
      display: block;
    }
  }
</style>